<template>
  <div class="calendar-container">
    <!-- 头部标题和年份选择器 -->
    <div class="calendar-header">
      <h2>工作日日历</h2>
      <div class="header-actions">
        <!-- 年份选择下拉框 -->
        <el-select v-model="selectedYear" placeholder="选择年份" class="year-select" @change="handleYearChange">
          <!-- 年份选项 -->
          <el-option v-for="year in availableYears" :key="year" :label="year.toString()" :value="year" />
        </el-select>
        <!-- 初始化当年数据按钮 -->
        <el-button type="primary" @click="initDataByYear">
          <i class="el-icon-refresh"></i> 初始化当年数据
        </el-button>
      </div>
    </div>

    <!-- 日历网格 -->
    <div class="calendar-grid">
      <div class="months-container">
        <!-- 循环生成12个月份的日历卡片 -->
        <div v-for="month in 12" :key="month" class="month-card">
          <!-- 月份标题 -->
          <div class="month-header">
            <h3>{{ getMonthName(month) }}</h3>
          </div>
          <!-- 星期标题行 -->
          <div class="weekdays">
            <div class="weekday">日</div>
            <div class="weekday">一</div>
            <div class="weekday">二</div>
            <div class="weekday">三</div>
            <div class="weekday">四</div>
            <div class="weekday">五</div>
            <div class="weekday">六</div>
          </div>
          <!-- 日期网格 -->
          <div class="days-grid">
            <!-- 循环生成每一周 -->
            <div v-for="(week, weekIndex) in getMonthWeeks(selectedYear, month)" :key="weekIndex" class="week-row">
              <!-- 循环生成每一天 -->
              <div v-for="(day, dayIndex) in week" :key="dayIndex" :class="getDayClass(day, dayIndex)"
                @click="editDay(day.date)">
                <!-- 日期数字 -->
                <span class="day-number">{{ day.day }}</span>
                <!-- 标记点（如果是特殊日期） -->
                <span v-if="day.mark" class="day-mark"></span>
                <!-- 悬停提示信息 -->
                <div v-if="day.markName" class="day-tooltip">{{ day.markName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑日期模态框 -->
    <el-dialog title="编辑日期类型" v-model="showEditModal" @close="handleModalClose">
      <el-form :model="editForm" label-width="80px">
        <!-- 日期显示（只读） -->
        <el-form-item label="日期">
          <el-input v-model="selectedDate" disabled />
        </el-form-item>
        <!-- 日期类型选择 -->
        <el-form-item label="类型">
          <el-radio-group v-model="editForm.type">
            <el-radio :label="1">工作日</el-radio>
            <el-radio :label="2">节假日</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 节假日名称输入 -->
        <el-form-item label="名称">
          <el-input v-model="editForm.name" placeholder="例如：国庆节" />
        </el-form-item>
      </el-form>
      <!-- 模态框底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEditModal = false">取消</el-button>
        <el-button type="primary" @click="saveWorkDay">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// Vue相关导入
import { ref, computed, onMounted, watch } from 'vue'
// Element Plus组件导入
import { ElMessage, ElMessageBox } from 'element-plus'
import Maxios from '@/Http/MesHelp';
// TODO: 需要导入axios（实际使用时取消注释）
// import axios from 'axios'

// 类型定义
interface WorkDay {
  id?: string;          // 唯一标识（可选）
  year: string;         // 年份
  month: string;        // 月份
  day: string;          // 日期
  name?: string;        // 节假日名称（可选）
  type: number;         // 日期类型：1-工作日, 2-节假日
}

interface CalendarDay {
  day: number;          // 日期数字
  date: string;         // 完整日期字符串（YYYY-MM-DD）
  isCurrentMonth: boolean; // 是否属于当前月份
  mark?: boolean;       // 是否有特殊标记
  markType?: number;    // 标记类型
  markName?: string;    // 标记名称
}

// 响应式数据
const currentYear = new Date().getFullYear()  // 当前年份
const selectedYear = ref(currentYear)         // 选中的年份
const markDayData = ref<WorkDay[]>([])        // 特殊日期数据数组
const showEditModal = ref(false)              // 是否显示编辑模态框
const selectedDate = ref('')                  // 当前选中的日期
const editForm = ref({                        // 编辑表单数据
  type: 1,                // 日期类型，默认为工作日
  name: ''                // 节假日名称
})

// 计算属性：可用年份列表
const availableYears = computed(() => {
  const years = []
  // 生成从2024到当前年份+1的年份列表
  for (let i = 2024; i <= currentYear + 1; i++) {
    years.push(i)
  }
  return years
})

// 监听年份变化
watch(selectedYear, (newYear) => {
  fetchWorkDays(newYear)  // 当年份变化时，重新获取该年份的工作日数据
})

// 组件挂载时初始化数据
onMounted(() => {
  fetchWorkDays(selectedYear.value)  // 获取初始年份的工作日数据
})

// 获取月份名称
const getMonthName = (month: number): string => {
  const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月',
    '七月', '八月', '九月', '十月', '十一月', '十二月']
  return monthNames[month - 1] || ''  // 返回对应月份名称
}

// 获取指定年份和月份的周和日期数据
const getMonthWeeks = (year: number, month: number): CalendarDay[][] => {
  const weeks: CalendarDay[][] = []  // 存储所有周的数组
  const firstDay = new Date(year, month - 1, 1)  // 当月第一天
  const lastDay = new Date(year, month, 0)       // 当月最后一天
  const daysInMonth = lastDay.getDate()          // 当月天数

  // 获取当月第一天是星期几 (0-6, 0是星期日)
  const firstDayOfWeek = firstDay.getDay()

  // 填充上个月的日期
  let dayCount = 1
  let currentWeek: CalendarDay[] = []

  // 添加上个月的尾巴（填充日历第一行前面的空白）
  for (let i = 0; i < firstDayOfWeek; i++) {
    const prevMonth = month === 1 ? 12 : month - 1
    const prevMonthYear = month === 1 ? year - 1 : year
    const prevMonthDays = new Date(prevMonthYear, prevMonth, 0).getDate()

    const day = prevMonthDays - firstDayOfWeek + i + 1
    const date = new Date(prevMonthYear, prevMonth - 1, day)

    currentWeek.push({
      day,
      date: formatDate(date),
      isCurrentMonth: false  // 不属于当前月份
    })
  }

  // 添加当月的日期
  for (let i = 1; i <= daysInMonth; i++) {
    // 如果当前周已满7天，则添加到周数组并创建新周
    if (currentWeek.length === 7) {
      weeks.push(currentWeek)
      currentWeek = []
    }

    const date = new Date(year, month - 1, i)
    const dateStr = formatDate(date)

    // 检查当前日期是否有特殊标记（节假日或特殊工作日）
    const markInfo = markDayData.value.find(
      item => item.year === year.toString() && item.month === month.toString() && item.day === i.toString()&& item.name != ''
    )
    
    // 添加当前日期到周数组
    currentWeek.push({
      day: i,
      date: dateStr,
      isCurrentMonth: true,      // 属于当前月份
      mark: !!markInfo,          // 是否有标记
      markType: markInfo?.type,  // 标记类型
      markName: markInfo?.name   // 标记名称
    })

    dayCount++
  }

  // 添加下个月的开头（填充日历最后一行后面的空白）
  while (currentWeek.length < 7) {
    const nextMonth = month === 12 ? 1 : month + 1
    const nextMonthYear = month === 12 ? year + 1 : year

    currentWeek.push({
      day: dayCount - daysInMonth,
      date: formatDate(new Date(nextMonthYear, nextMonth - 1, dayCount - daysInMonth)),
      isCurrentMonth: false  // 不属于当前月份
    })
    dayCount++
  }

  weeks.push(currentWeek)  // 添加最后一周

  return weeks
}

// 获取日期的CSS类名
const getDayClass = (day: CalendarDay, dayIndex: number) => {
  const baseClasses = ['day-cell']  // 基础类名

  // 非当前月份的日期
  if (!day.isCurrentMonth) {
    baseClasses.push('other-month')
  } else {
    // 周末样式（周六和周日）
    if (dayIndex === 0 || dayIndex === 6) {
      baseClasses.push('weekend')
    }

    // 特殊标记样式
    if (day.mark) {
      if (day.markType === 2) {
        baseClasses.push('holiday')  // 节假日样式
      } else {
        baseClasses.push('workday')  // 特殊工作日样式
      }
    }
  }

  // 今天样式
  if (day.date === formatDate(new Date())) {
    baseClasses.push('today')
  }

  return baseClasses
}

// 格式化日期为YYYY-MM-DD格式
const formatDate = (date: Date): string => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')  // 月份补零
  const day = String(date.getDate()).padStart(2, '0')         // 日期补零
  return `${year}-${month}-${day}`
}

// 处理年份变化
const handleYearChange = () => {
  fetchWorkDays(selectedYear.value)  // 重新获取选定年份的数据
}

// 获取工作日数据（需要连接后端API）
const fetchWorkDays = async (year: number) => {
  try {
    // TODO: 使用axios获取指定年份的工作日数据
    // 示例：
    // const response = await axios.get(`/api/work-days?year=${year}`)
    // markDayData.value = response.data || []
    // 获取每日数据的方法

     await Maxios.get('/api/Process/GetDayly', {
      // params: {
      //   Type: 2
      // }
    }).then(res => {    
    markDayData.value = res.data.data

    })
   

  } catch (error) {
    // 以下为模拟数据，实际应替换为axios请求结果
    markDayData.value = [
      { year: year.toString(), month: '1', day: '1', name: '元旦', type: 2 },
      { year: year.toString(), month: '1', day: '2', name: '元旦', type: 2 },
      { year: year.toString(), month: '1', day: '3', name: '元旦', type: 2 },
      { year: year.toString(), month: '4', day: '5', name: '清明节', type: 2 },
      { year: year.toString(), month: '4', day: '6', name: '清明节', type: 2 },
      { year: year.toString(), month: '4', day: '7', name: '清明节', type: 2 },
      { year: year.toString(), month: '5', day: '1', name: '劳动节', type: 2 },
      { year: year.toString(), month: '5', day: '2', name: '劳动节', type: 2 },
      { year: year.toString(), month: '5', day: '3', name: '劳动节', type: 2 },
      { year: year.toString(), month: '6', day: '10', name: '端午节', type: 2 },
      { year: year.toString(), month: '6', day: '11', name: '端午节', type: 2 },
      { year: year.toString(), month: '6', day: '12', name: '端午节', type: 2 },
      { year: year.toString(), month: '9', day: '15', name: '中秋节', type: 2 },
      { year: year.toString(), month: '9', day: '16', name: '中秋节', type: 2 },
      { year: year.toString(), month: '9', day: '17', name: '中秋节', type: 2 },
      { year: year.toString(), month: '10', day: '1', name: '国庆节', type: 2 },
      { year: year.toString(), month: '10', day: '2', name: '国庆节', type: 2 },
      { year: year.toString(), month: '10', day: '3', name: '国庆节', type: 2 },
      { year: year.toString(), month: '10', day: '4', name: '国庆节', type: 2 },
      { year: year.toString(), month: '10', day: '5', name: '国庆节', type: 2 },
      { year: year.toString(), month: '10', day: '6', name: '国庆节', type: 2 },
      { year: year.toString(), month: '10', day: '7', name: '国庆节', type: 2 },
    ]
    console.error('Failed to fetch work days:', error)
    ElMessage.error('获取工作日数据失败')  // 显示错误消息
  }
}

// 初始化年份数据（需要连接后端API）
const initDataByYear = async () => {
  // 显示确认对话框
  if (await ElMessageBox.confirm(
    `您是否要初始化${selectedYear.value}年工作日数据？`,
    '确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )) {
    try {
      // TODO: 使用axios发送初始化请求
      // 示例：
      // await axios.post('/api/work-days/init', { year: selectedYear.value })
      // 初始化成功后重新获取数据
      await fetchWorkDays(selectedYear.value)
      ElMessage.success('初始化成功')  // 显示成功消息
    } catch (error) {
      console.error('Failed to initialize work day data:', error)
      ElMessage.error('初始化失败')  // 显示错误消息
    }
  }
}

// 编辑日期
const editDay = (date: string) => {
  console.log(date);
  
  const dateObj = new Date(date)
  // 只允许编辑当前选中年份的日期
  if (dateObj.getFullYear() !== selectedYear.value) {
    ElMessage.info('只能编辑选中年份的日期')  // 显示提示信息
    return
  }

  selectedDate.value = date  // 设置选中的日期
  showEditModal.value = true // 显示编辑模态框

  // 检查是否已有记录
  const year = dateObj.getFullYear()
  const month = dateObj.getMonth() + 1
  const day = dateObj.getDate()

  const existing = markDayData.value.find(
    item => item.year === year.toString() && item.month === month.toString() && item.day === day.toString()
  )

  // 如果已有记录，填充表单
  if (existing) {
    editForm.value.type = existing.type
    editForm.value.name = existing.name || ''
  } else {
    // 默认值：周末设为节假日，工作日设为工作日
    const dayOfWeek = dateObj.getDay()
    editForm.value.type = (dayOfWeek === 0 || dayOfWeek === 6) ? 2 : 1
    editForm.value.name = ''
  }
}

// 关闭模态框时重置表单
const handleModalClose = () => {
  editForm.value = {
    type: 1,
    name: ''
  }
}

// 保存工作日设置（需要连接后端API）
const saveWorkDay = async () => {
  try {
    const dateObj = new Date(selectedDate.value)
    const year = dateObj.getFullYear()
    const month = dateObj.getMonth() + 1
    let day = dateObj.getDate()
    let months=''
    let days=''
    months=month.toString()
    days=day.toString()
    if(month<10)
    {
      months="0"+month.toString()
    }
    if(day<10)
    {
      days="0"+day.toString()
    }

    // 节假日必须填写名称
    if (editForm.value.type === 2 && !editForm.value.name) {
      ElMessage.warning('请输入节假日名称')  // 显示警告消息
      return
    }

    
    const workDayData = {
     
      id: `${year}-${months}-${days}`,
      year:year.toString(),
      month:month.toString(),
      day:day.toString(),
      name: editForm.value.name,
      type: editForm.value.type
    }

    // TODO: 使用axios保存工作日配置
    // 示例：
    // 新增或更新（根据是否有id判断）
    // if (workDayData.id) {
    //   await axios.put(`/api/work-days/${workDayData.id}`, workDayData)
    // } else {
    //   await axios.post('/api/work-days', workDayData)
    // }
    await Maxios.put('/api/Process/DaylyUpdate', workDayData)

    // 以下为本地更新，实际应在axios请求成功后执行
    const index = markDayData.value.findIndex(d =>
      d.year === year.toString() && d.month === month.toString() && d.day === day.toString()
    )

    // 更新或添加数据
    // if (index >= 0) {
    //   markDayData.value[index] = workDayData
    // } else {
    //   markDayData.value.push(workDayData)
    // }

    showEditModal.value = false  // 关闭模态框
    ElMessage.success('保存成功') // 显示成功消息
    fetchWorkDays(year) // 重新获取数据
  } catch (error) {
    console.error('Failed to save work day data:', error)
    ElMessage.error('保存失败')  // 显示错误消息
  }
}

// 判断是否为工作日（保留此方法，用于日历样式展示）
const isWorkDay = (date: string): boolean => {
  const dateObj = new Date(date)
  // 先检查是否是周末
  const dayOfWeek = dateObj.getDay()
  const isWeekend = dayOfWeek === 0 || dayOfWeek === 6

  // 检查是否有特殊标记
  const year = dateObj.getFullYear()
  const month = dateObj.getMonth() + 1
  const day = dateObj.getDate()

  const markedDay = markDayData.value.find(
    item => item.year === year.toString() && item.month === month.toString() && item.day === day.toString()
  )

  // 如果有标记，根据标记类型判断
  if (markedDay) {
    return markedDay.type === 1  // 1表示工作日
  }

  // 没有标记则周末为非工作日，其他为工作日
  return !isWeekend
}
</script>

<style scoped>
/* 日历容器样式 */
.calendar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 日历头部样式 */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* 头部操作区域样式 */
.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* 年份选择器样式 */
.year-select {
  width: 120px;
}

/* 月份容器样式（网格布局） */
.months-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 月份卡片样式 */
.month-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 月份标题样式 */
.month-header {
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
  border-bottom: 1px solid #f0f0f0;
}

/* 星期标题行样式 */
.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: 500;
  padding: 8px 0;
  background-color: #f5f7fa;
}

/* 单个星期标题样式 */
.weekday {
  padding: 5px;
  font-size: 14px;
}

/* 日期网格容器样式 */
.days-grid {
  margin-top: 5px;
}

/* 周行样式 */
.week-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

/* 日期单元格基础样式 */
.day-cell {
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

/* 日期单元格悬停效果 */
.day-cell:hover {
  background-color: #e6f7ff;
}

/* 日期数字样式 */
.day-number {
  font-size: 14px;
}

/* 非当前月份日期样式 */
.other-month .day-number {
  color: #999;
}

/* 周末日期样式 */
.weekend {
  background-color: #fff1f0;
}

/* 节假日样式 */
.holiday {
  background-color: #fff2e8;
}

/* 节假日标记点样式 */
.holiday .day-mark {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #f5222d;
  margin-top: 2px;
}

/* 特殊工作日标记点样式 */
.workday .day-mark {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #52c41a;
  margin-top: 2px;
}

/* 今天日期样式 */
.today {
  border: 2px solid #1890ff;
}

/* 日期提示信息样式 */
.day-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
  display: none;
  z-index: 10;
}

/* 悬停时显示提示信息 */
.day-cell:hover .day-tooltip {
  display: block;
}
</style>